<template>
	<view class="container">
		<!-- 调整首页入口 -->
		<!-- 顶部状态栏占位 -->
		<view class="status-bar"></view>

		<!-- 标题栏 -->
		<view class="header">
			<!-- 天禅境图标 -->
			<image class="title-text" src="https://file.wykji.cn/uploads/20250504/8cfaa29e582b0f0d8ae5eb384c9e4b22.png">
			</image>

			<view class="header-icons">
				<text @tap="handleNavClick('search')" class="iconfont icon-sousuo"></text>
				<!-- <text @tap="handleNavClick('message')" class="iconfont icon-icon-message"></text> -->
			</view>
		</view>

		<!-- 3D翻页式轮播图 -->
		<view class="swiper-container">
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
				:circular="true" indicator-active-color="#C8A675" indicator-color="rgba(200, 166, 117, 0.3)"
				:previous-margin="'50rpx'" :next-margin="'50rpx'" @change="onSwiperChange">
				<swiper-item v-for="(item, index) in bannerList" :key="index" class="swiper-item">
					<view class="swiper-item-content" :class="{ 'active': current === index }">
						<image :src="item.image" mode="aspectFill"></image>
						<view class="banner-title">
							<text>{{ item.title }}</text>
							<view class="banner-subtitle">{{ item.subtitle }}</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 导航图标区 -->
		<view class="nav-icons">
			<view class="nav-item" v-for="(item, index) in navIcons" :key="index" @click="goItemClass(item.category_id)">
				<image :src="item.images.file_path" class="nav-pic" mode="widthFix"></image>
				<text class="nav-text">{{ item.name }}</text>
			</view>
		</view>
		
		<!-- 守护行者入口 (点击后弹出选择菜单) -->
		<view class="entry-section guardian-walker" @tap="showWalkerOptions">
			<view class="entry-left">
				<text class="entry-title">守护行者</text>
				<text class="entry-desc">开启守护行者之路</text>
			</view>
			<view class="entry-right">
				<button class="entry-btn walker-btn">开启功德</button>
			</view>
		</view>
		
		<!-- 守护使者入口 (不可点击) -->
		<view class="entry-section guardian-messenger non-clickable">
			<view class="entry-left">
				<text class="entry-title">守护使者</text>
				<text class="entry-desc">开启守护使者之门</text>
			</view>
			<view class="entry-right">
				<button class="entry-btn messenger-btn" disabled>成为守护使者</button>
			</view>
		</view>

		<!-- 横向分割线 -->
		<view class="divider">
			<view class="divider-line"></view>
			<view class="divider-text">九品格</view>
			<view class="divider-line"></view>
		</view>

		<!-- 九宫格产品展示 -->
		<view class="grid-container">
			<view class="grid-item" v-for="(item, index) in productList" :key="index" @tap="navigateToDetail(item.id)">
				<image :src="item.image" mode="aspectFill" class="product-image"></image>
				<view class="product-info">
					<text class="product-title">{{ item.title }}</text>
					<text class="product-price">¥{{ item.price }}</text>
				</view>
			</view>
			<view class="grid-item none" v-for="n in (3 - productList.length % 3)" :key="n"
				v-if="productList.length % 3 > 0"></view>
		</view>
		
		<!-- 如来者之境入口 (修改样式) -->
		<view class="entry-section enlightenment-realm">
			<view class="entry-left">
				<text class="entry-title enlightenment-title">如来者之境</text>
				<text class="entry-desc enlightenment-desc">开启禅意生活之境</text>
			</view>
			<view class="entry-right">
				<button class="entry-btn enlightenment-btn" @tap="navigateToMemberPrivileges">入境禅定</button>
			</view>
		</view>

		<!-- 免费礼品选择弹窗 -->
		<view class="modal-mask" v-if="showGiftModal" @tap="closeGiftModal"></view>
		<view class="modal-container" v-if="showGiftModal">
			<view class="modal-content">
				<view class="modal-header">
					<text class="modal-title">选择免费礼品</text>
					<text class="modal-close iconfont icon-lajitong" @tap="closeGiftModal"></text>
				</view>
				<scroll-view scroll-y="true" class="modal-body">
					<view class="gift-selection">
						<view class="gift-item" v-for="(item, index) in productList" :key="index"
							:class="selectedGift === item.id ? 'active' : ''" @tap="selectGift(item.id)">
							<image :src="item.image" mode="aspectFill" class="gift-image"></image>
							<view class="gift-info">
								<text class="gift-title">{{ item.title }}</text>
								<text class="gift-price">原价: ¥{{ item.price }}</text>
							</view>
							<view class="gift-selected" v-if="selectedGift === item.id">
								<text class="iconfont icon-duihao"></text>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="modal-footer">
					<button class="gift-confirm-btn" @tap="confirmGiftSelection" :disabled="!selectedGift">确认选择</button>
				</view>
			</view>
		</view>
		
		<!-- 购买协议弹窗 -->
		<view class="modal" v-if="showAgreementModal">
			<view class="modal-mask" @tap="cancelAgreement"></view>
			<view class="modal-container agreement-modal">
				<view class="modal-header">
					<text class="modal-title">购买协议</text>
					<view class="modal-close" @tap="cancelAgreement">×</view>
				</view>
				<scroll-view class="modal-body agreement-content" scroll-y>
					<view class="agreement-title">尊敬的顾客：</view>
					<view class="agreement-paragraph">感谢您选择购买我们的产品。请您在完成购买前仔细阅读以下条款，确认并同意本协议内容：</view>
					
					<view class="agreement-section">
						<view class="agreement-section-title">产品说明</view>
						<view class="agreement-item">本产品为天禅境精选商品，具体规格、产地、材质等信息请以商品详情页展示为准。</view>
						<view class="agreement-item">商品图片均为实物拍摄，但因拍摄光线、显示器等原因可能与实物存在细微色差，请以实物为准。</view>
					</view>
					
					<view class="agreement-section">
						<view class="agreement-section-title">价格与支付</view>
						<view class="agreement-item">商品价格以订单提交时显示的价格为准，如遇促销、会员折扣等活动，将按活动规则计算。</view>
						<view class="agreement-item">支付方式包括但不限于微信支付、支付宝等，具体以结算页面可选支付方式为准。</view>
					</view>
					
					<view class="agreement-section">
						<view class="agreement-section-title">配送与售后</view>
						<view class="agreement-item">我们会在您付款成功后尽快安排发货，配送时间视您的收货地址和物流情况而定。</view>
						<view class="agreement-item">如商品存在质量问题，您可在收到商品后7天内申请退换货，具体以《退换货政策》为准。</view>
					</view>
					
					<view class="agreement-section">
						<view class="agreement-section-title">个人信息保护</view>
						<view class="agreement-item">您授权我们收集、使用您的订单信息、联系方式等用于订单处理、物流配送及售后服务。</view>
						<view class="agreement-item">您的个人信息将严格遵循《隐私政策》进行保护，未经允许不会向第三方披露。</view>
					</view>
					
					<view class="agreement-section">
						<view class="agreement-section-title">免责声明</view>
						<view class="agreement-item">因不可抗力（如自然灾害、系统故障等）导致的订单延迟或无法履行，本公司将协商解决但不承担额外赔偿责任。</view>
						<view class="agreement-item">限量商品售完即止，敬请理解。</view>
					</view>
				</scroll-view>
				<view class="modal-footer agreement-footer">
					<view class="agreement-checkbox" @tap="toggleAgreement">
						<view class="checkbox" :class="{ checked: agreementChecked }">
							<text class="checkbox-icon" v-if="agreementChecked">✓</text>
						</view>
						<text class="checkbox-text">我已阅读并同意以上协议</text>
					</view>
					<view class="button-group">
						<button class="cancel-button" @tap="cancelAgreement">返回</button>
						<button 
							class="confirm-button" 
							:class="{ disabled: !agreementChecked }"
							:disabled="!agreementChecked"
							@tap="confirmPurchase"
						>确认购买</button>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 守护行者选项弹窗 -->
		<view class="modal" v-if="showWalkerSelectionModal">
			<view class="modal-mask" @tap="closeWalkerSelectionModal"></view>
			<view class="modal-container walker-options-modal">
				<view class="modal-content">
					<view class="modal-header">
						<text class="modal-title">请选择功能</text>
						<view class="modal-close" @tap="closeWalkerSelectionModal">×</view>
					</view>
					<view class="walker-options">
						<view class="walker-option" @tap="navigateToPointsMall">
							<view class="option-icon clock-icon">
								<text class="iconfont icon-clock"></text>
							</view>
							<view class="option-info">
								<text class="option-title">每日打卡</text>
								<text class="option-desc">积累功德，修行精进</text>
							</view>
							<text class="option-arrow iconfont icon-right"></text>
						</view>
						
						<view class="walker-option" @tap="navigateToTemple">
							<view class="option-icon temple-icon">
								<text class="iconfont icon-temple"></text>
							</view>
							<view class="option-info">
								<text class="option-title">寺庙入驻</text>
								<text class="option-desc">守护道场，弘扬佛法</text>
							</view>
							<text class="option-arrow iconfont icon-right"></text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	getInfo
} from '../../api/user';
import {
	hideloading,
	loading,
	textareaCon,
	tip
} from '../../utils';
import {
	getIndexPicNav,
	getBanner
} from '@/api/app';
import {
	productListApi,
	productRecommendApi,
	productCategoryApi
} from '@/api/product';
import {
	userStore
} from '../../store/userStore';

const user = userStore()
export default {
	data() {
		return {
			current: 0,
			showGiftModal: false,
			bannerList: [],
			navIcons: [],
			productList: [],
			userInfo: {},
			userTotalSpent: 0, // 用户总消费金额
			selectedGift: null, // 选中的礼品ID
			giftSelected: false, // 用户是否已选择过礼品
			
			// 协议相关
			showAgreementModal: false, // 控制协议弹窗显示
			agreementChecked: false, // 协议是否勾选
			selectedProductId: null, // 当前选中的商品ID
			firstTimeVisit: true, // 是否首次访问（用于控制是否显示协议）
			
			// 守护行者选项弹窗
			showWalkerSelectionModal: false, // 控制守护行者选项弹窗显示
		}
	},
	onLoad() {
		
		// 获取用户信息
		getInfo().then((res) => {
			this.userInfo = res.userInfo;
			// 设置用户总消费金额

			this.userTotalSpent = parseFloat(this.userInfo.expend_money);
			console.log(this.userTotalSpent);

		});
		// 获取图标
        productCategoryApi().then((res)=>{
			 console.log(res.list);
			 this.navIcons = res.list;
			 console.log(this.navIcons);
		 })
		//获取banner和图片导航
		getBanner().then((res) => {
			this.bannerList = res.map((item) => {
				return {
					"image": item.pic,
					"title": item.title,
					"subtitle": item.sub_title
				};
			})
		})
		productRecommendApi({
			location: 'index'
		}).then((res) => {
			if (res && res.list) {
				this.productList = res.list.map((item) => {
					console.log(item);
					return {
						id: item.product_id,
						title: item.product_name,
						price: item.product_price,
						image: item.product_image
					}
				})
			} else {
				this.productList = [];
			}
		})
	},
	onShareAppMessage() {
		console.log("/pages/index/share?referee=" + user.user_id)
		return {
			title: "天禅境",
			path: "/pages/index/share?referee=" + user.user_id,
			imageUrl: "../../static/logo.png"
		}
	},
	methods: {
		// 检查用户是否已经领取过礼品
		checkGiftStatus() {
			// 临时模拟
			const hasSelectedGift = uni.getStorageSync('user_gift_selected_' + this.userInfo.user_id);
			this.giftSelected = !!hasSelectedGift;
		},

		// 处理礼品选择点击
		handleFreeGiftClick() {
			if (this.giftSelected) {
				tip('您已领取过免费礼品');
				return;
			}
			this.showGiftModal = true;
		},

		// 关闭礼品选择弹窗
		closeGiftModal() {
			this.showGiftModal = false;
		},

		// 选择礼品
		selectGift(giftId) {
			this.selectedGift = giftId;
		},

		// 确认礼品选择
		confirmGiftSelection() {
			if (!this.selectedGift) {
				tip('请选择一件礼品');
				return;
			}

			loading('正在处理您的选择');
		},

		onSwiperChange(e) {
			this.current = e.detail.current;
		},
		
		// 修改导航到详情页的方法，先显示协议
		navigateToDetail(id) {
			// 检查是否需要显示协议
			const hasAgreed = uni.getStorageSync('product_agreement_accepted');
			
			if (this.firstTimeVisit && !hasAgreed) {
				// 首次点击且未同意过协议，显示协议弹窗
				this.selectedProductId = id;
				this.showAgreementModal = true;
				this.agreementChecked = false;
			} else {
				// 已同意过协议，直接跳转
				this.goToProductDetail(id);
			}
		},
		
		// 跳转到商品详情页
		goToProductDetail(id) {
			uni.navigateTo({
				url: `/pages/shapping/detail?id=${id}`
			});
		},
		
		goItemClass(class_id) {
			uni.setStorageSync("shop_class", class_id)
			uni.switchTab({
				url: "/pages/shapping/shapping"
			})
		},
		handleNavClick(type) {
			// 定义路由映射表
			const routeMap = {
				search: {
					path: '/pages/shapping/seacher',
					animationType: 'slide-in-right'
				},
				message: {
					path: '/pages/notice/notice',
					animationType: 'slide-in-left'
				}
			};

			// 获取路由配置
			const routeConfig = routeMap[type];
			if (!routeConfig) {
				return uni.showToast({
					title: '功能暂未开放',
					icon: 'none'
				});
			}

			// 执行跳转
			uni.navigateTo({
				url: routeConfig.path,
				animationType: routeConfig.animationType,
				success: () => {
					// 跳转成功后的跟踪逻辑
					this.$trackEvent('nav_click', {
						type
					});
				},
				fail: (err) => {
					console.error('跳转失败:', err);
				}
			});
		},
		
		// 显示守护行者选项弹窗
		showWalkerOptions() {
			this.showWalkerSelectionModal = true;
		},
		
		// 关闭守护行者选项弹窗
		closeWalkerSelectionModal() {
			this.showWalkerSelectionModal = false;
		},
		
		// 跳转到会员权益页面
		navigateToMemberPrivileges() {
			uni.navigateTo({
				url: '/pages/index/memberPrivileges'
			});
		},
		
		// 跳转到入驻寺庙页面
		navigateToTemple() {
			this.closeWalkerSelectionModal();
			uni.navigateTo({
				url: '/pages/temple/protection'
			});
		},
		
		// 跳转到打卡界面
		navigateToPointsMall() {
			this.closeWalkerSelectionModal();
			uni.navigateTo({
				url: '/pages/my/Clock'
			});
		},
		
		getTextarea(str) {
			return textareaCon(str)
		},
		// 取消协议
		cancelAgreement() {
			this.showAgreementModal = false;
			this.agreementChecked = false;
			this.selectedProductId = null;
		},
		
		// 切换协议勾选状态
		toggleAgreement() {
			this.agreementChecked = !this.agreementChecked;
		},
		
		// 确认购买（同意协议）
		confirmPurchase() {
			if (!this.agreementChecked) {
				uni.showToast({
					title: '请先阅读并同意协议',
					icon: 'none'
				});
				return;
			}
			
			// 关闭协议弹窗
			this.showAgreementModal = false;
			
			// 记录用户已同意协议
			uni.setStorageSync('product_agreement_accepted', true);
			this.firstTimeVisit = false;
			
			// 显示处理中提示
			uni.showLoading({
				title: '正在处理...'
			});
			
			// 跳转到商品详情页
			setTimeout(() => {
				uni.hideLoading();
				if (this.selectedProductId) {
					this.goToProductDetail(this.selectedProductId);
					this.selectedProductId = null;
				}
			}, 500);
		}
	}
}
</script>

<style lang="scss">
/* 导入字体图标 */
@font-face {
	font-family: 'iconfont';
	src: url('https://at.alicdn.com/t/font_xxxx.ttf') format('truetype');
}

/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
	font-family: 'iconfont';
	/* Project id 4874541 */
	src: url('//at.alicdn.com/t/c/font_4874541_uez9gu2bi78.woff2?t=1743246128509') format('woff2'),
		url('//at.alicdn.com/t/c/font_4874541_uez9gu2bi78.woff?t=1743246128509') format('woff'),
		url('//at.alicdn.com/t/c/font_4874541_uez9gu2bi78.ttf?t=1743246128509') format('truetype');
}

.iconfont {
	font-family: "iconfont" !important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* 字体图标定义 */
.icon-fojing:before {
	content: "\e653";
}

.icon-lajitong:before {
	content: "\e615";
}

.icon-rightyinhao:before {
	content: "\e60f";
}

.icon-duihao:before {
	content: "\e600";
}

.icon-search:before {
	content: "\e8ef";
}

.icon-message:before {
	content: "\e8bd";
}

.icon-clock:before {
	content: "\e602";
}

.icon-temple:before {
	content: "\e654";
}

.icon-right:before {
	content: "\e617";
}

.iconfont {
	font-family: "iconfont" !important;
	font-size: 24px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

page {
	background-color: #F5F2EA;
	/* 米白色背景 */
	font-family: "思源宋体", serif;
}

.container {
	width: 100%;
}

.status-bar {
	height: var(--status-bar-height);
	width: 100%;
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 30rpx;
}

.title-text {
	font-family: "汉仪尚巍手书", "思源宋体", serif;
	font-size: 36rpx;
	color: #6A4C29;
	width: 150rpx;
	height: 80rpx;
	display: block;
	/* 檀木棕色 */
}

.title-text image {
	width: 80rpx;
	height: 80rpx;
	display: block;
}

.header-icons {
	display: flex;
	gap: 30rpx;

	.iconfont {
		color: #6A4C29;
	}
}

/* 轮播图样式 */
.swiper-container {
	width: 100%;
	height: 350rpx;
	margin-bottom: 30rpx;
}

.swiper {
	height: 100%;
}

.swiper-item {
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.3s;
}

.swiper-item-content {
	height: 300rpx;
	width: 650rpx;
	border-radius: 15rpx;
	overflow: hidden;
	position: relative;
	box-shadow: 0 8rpx 20rpx rgba(106, 76, 41, 0.1);
	transform: scale(0.9);
	transition: all 0.3s;

	&.active {
		transform: scale(1);
	}

	image {
		width: 100%;
		height: 100%;
	}
}

.banner-title {
	position: absolute;
	bottom: 30rpx;
	left: 30rpx;
	color: #fff;
	font-family: "汉仪尚巍手书", "思源宋体", serif;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);

	text {
		font-size: 36rpx;
		display: block;
	}

	.banner-subtitle {
		font-size: 24rpx;
		opacity: 0.9;
		margin-top: 6rpx;
		font-family: "思源宋体", serif;
	}
}

/* 导航图标区 */
.nav-icons {
	display: flex;
	justify-content: space-between;
	padding: 20rpx 40rpx 50rpx;

	.nav-item {
		flex: 1;

		.nav-pic {
			width: 70%;
			margin: 0 auto;
			border-radius: 50%;
			margin-bottom: 5px;
		}
	}
}

.nav-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100rpx;
}

.icon-bg {
	width: 80rpx;
	height: 80rpx;
	background-color: #F1E3C4;
	/* 佛经黄 */
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 15rpx;

	.iconfont {
		color: #6A4C29;
	}
}

.nav-text {
	font-size: 24rpx;
	color: #6A4C29;
}

/* 新增: 统一入口区域样式 */
.entry-section {
	margin: 0 30rpx 30rpx;
	border-radius: 15rpx;
	padding: 25rpx 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.15);
}

/* 非可点击样式 */
.non-clickable {
	opacity: 0.8;
	position: relative;
	
	.entry-btn {
		opacity: 0.7;
		cursor: not-allowed;
	}
	
	&::after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(255, 255, 255, 0.1);
		border-radius: 15rpx;
		pointer-events: none;
	}
}

.entry-left {
	display: flex;
	flex-direction: column;
}

.entry-title {
	font-size: 36rpx;
	font-weight: bold;
	font-family: "汉仪尚巍手书", "思源宋体", serif;
	display: block;
}

.entry-desc {
	font-size: 24rpx;
	display: block;
	margin-top: 10rpx;
}

.entry-btn {
	font-size: 28rpx;
	font-weight: bold;
	padding: 12rpx 35rpx;
	border-radius: 50rpx;
	border: none;
	box-shadow: 0 3rpx 8rpx rgba(0, 0, 0, 0.1);
}

/* 守护使者入口 - 深褐色 */
.guardian-messenger {
	background: linear-gradient(135deg, #D2691E 0%, #A0522D 100%);
	
	.entry-title, .entry-desc {
		color: #fff;
	}
	
	.entry-desc {
		opacity: 0.8;
	}
	
	.messenger-btn {
		background-color: #fff;
		color: #D2691E;
	}
}

/* 守护行者入口 - 橙色 */
.guardian-walker {
	background: linear-gradient(135deg, #ff7f24 0%, #ff8248 100%);
	
	.entry-title, .entry-desc {
		color: #fff;
	}
	
	.entry-desc {
		opacity: 0.8;
	}
	
	.walker-btn {
		background-color: #fff;
		color: #D2691E;
	}
}

/* 如来者之境入口 */
.enlightenment-realm {
	background: linear-gradient(135deg, #F5DEB3 0%, #EED592 100%);
	
	.enlightenment-title, .enlightenment-desc {
		color: #CC7722;
	}
	
	.enlightenment-desc {
		opacity: 0.9;
	}
	
	.enlightenment-btn {
		background-color: #fff;
		color: #CC7722;
		border: 1px solid #CC7722;
	}
}

/* 分割线 */
.divider {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 30rpx;
	margin: 20rpx 0 40rpx;
}

.divider-line {
	flex: 1;
	height: 2rpx;
	background-color: rgba(106, 76, 41, 0.2);
}

.divider-text {
	padding: 0 30rpx;
	font-family: "汉仪尚巍手书", "思源宋体", serif;
	color: #6A4C29;
	font-size: 32rpx;
}

/* 九宫格产品展示 */
.grid-container {
	padding: 0 20rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.grid-item {
	width: calc(33.33% - 20rpx);
	margin-bottom: 30rpx;
	border-radius: 10rpx;
	overflow: hidden;
	background-color: #fff;
	box-shadow: 0 5rpx 15rpx rgba(106, 76, 41, 0.05);
}

.grid-item.none {
	background: none;
}

.product-image {
	width: 100%;
	height: 200rpx;
}

.product-info {
	padding: 15rpx;
}

.product-title {
	font-size: 24rpx;
	color: #333;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.product-price {
	font-size: 26rpx;
	color: #C8A675;
	/* 佛经黄变暗 */
	margin-top: 10rpx;
	display: block;
}

/* 弹窗样式 */
.modal-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 999;
}

.modal-container {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 86%;
	max-height: 80vh;
	z-index: 1000;
	display: flex;
	flex-direction: column;
}

.modal-content {
	background-color: #F8F5EF;
	border-radius: 20rpx;
	box-shadow: 0 10rpx 30rpx rgba(106, 76, 41, 0.2);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.modal-header {
	padding: 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1rpx solid rgba(106, 76, 41, 0.1);
}

.modal-title {
	font-family: "汉仪尚巍手书", "思源宋体", serif;
	font-size: 34rpx;
	color: #6A4C29;
}

.modal-close {
	color: #999;
	font-size: 34rpx;
}

.modal-body {
	max-height: 60vh;
}

.membership-level {
	margin: 30rpx;
	background-color: #fff;
	border-radius: 15rpx;
	overflow: hidden;
	box-shadow: 0 5rpx 15rpx rgba(106, 76, 41, 0.05);

	&.active {
		border: 1px solid #00aaff;
	}
}

.level-header {
	padding: 20rpx 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1rpx solid rgba(106, 76, 41, 0.1);
}

.level-badge {
	padding: 6rpx 20rpx;
	border-radius: 30rpx;
	color: #fff;
	font-size: 26rpx;
	font-weight: bold;
}

.level-price {
	font-size: 36rpx;
	color: #6A4C29;
	font-weight: bold;
}

.price-unit {
	font-size: 22rpx;
	color: #999;
	font-weight: normal;
}

.level-benefits {
	padding: 20rpx 30rpx;
}

.benefit-item {
	display: flex;
	align-items: flex-start;
	margin-bottom: 15rpx;
}

.benefit-icon {
	font-size: 20rpx;
	color: #C8A675;
	margin-right: 10rpx;
	margin-top: 6rpx;
}

.benefit-text {
	font-size: 28rpx;
	color: #333;
	flex: 1;
}

.membership-notes {
	margin-top: 30rpx;
	padding: 30rpx;
	background-color: rgba(200, 166, 117, 0.1);
	border-radius: 15rpx;
}

.notes-title {
	font-size: 30rpx;
	color: #6A4C29;
	font-weight: bold;
	margin-bottom: 20rpx;
	display: block;
}

.notes-item {
	font-size: 26rpx;
	color: #666;
	line-height: 1.6;
	display: block;
	margin-bottom: 10rpx;
}

.modal-footer {
	padding: 20rpx 30rpx 40rpx;
}

.join-btn {
	background: linear-gradient(135deg, #C8A675 0%, #6A4C29 100%);
	color: #fff;
	font-size: 32rpx;
	border-radius: 50rpx;
	padding: 20rpx 0;
	width: 100%;
	border: none;
}

/* 礼品选择样式 */
.gift-selection {
	padding: 20rpx;
}

.gift-item {
	display: flex;
	align-items: center;
	background-color: #fff;
	border-radius: 15rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 5rpx 15rpx rgba(106, 76, 41, 0.05);
	position: relative;
}

.gift-item.active {
	border: 2rpx solid #C8A675;
	background-color: rgba(200, 166, 117, 0.05);
}

.gift-image {
	width: 120rpx;
	height: 120rpx;
	border-radius: 10rpx;
	margin-right: 20rpx;
}

.gift-info {
	flex: 1;
}

.gift-title {
	font-size: 28rpx;
	color: #333;
	display: block;
	margin-bottom: 10rpx;
	font-weight: bold;
}

.gift-price {
	font-size: 26rpx;
	color: #999;
	display: block;
}

.gift-selected {
	position: absolute;
	right: 20rpx;
	top: 20rpx;
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	background-color: #C8A675;
	display: flex;
	justify-content: center;
	align-items: center;
}

.gift-selected .iconfont {
	color: #fff;
	font-size: 24rpx;
}

.gift-confirm-btn {
	background: linear-gradient(135deg, #FFA500 0%, #FF8C00 100%);
	color: #fff;
	font-size: 32rpx;
	border-radius: 50rpx;
	padding: 20rpx 0;
	width: 100%;
	border: none;
}

.gift-confirm-btn[disabled] {
	background: #CCCCCC;
	color: #999;
}

/* 会员协议弹窗样式 */
.modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
}

.agreement-modal {
	background-color: #FFFBF1;
}

.agreement-content {
	padding: 20rpx 30rpx;
}

.agreement-title {
	font-size: 30rpx;
	font-weight: 600;
	color: #6A4C29;
	margin-bottom: 20rpx;
	font-family: "汉仪尚巍手书", "思源宋体", serif;
}

.agreement-paragraph {
	width: 85%;
	font-size: 30rpx;
	color: #75695C;
	line-height: 1.6;
	margin-bottom: 30rpx;
}

.agreement-section {
	margin-bottom: 30rpx;
}

.agreement-section-title {
	font-size: 30rpx;
	font-weight: 600;
	color: #6A4C29;
	margin-bottom: 16rpx;
	position: relative;
	padding-left: 20rpx;
}

.agreement-section-title::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 8rpx;
	height: 28rpx;
	background-color: #C8A675;
	border-radius: 4rpx;
}

.agreement-item {
	font-size: 28rpx;
	width: 85%;
	color: #75695C;
	line-height: 1.6;
	padding-left: 20rpx;
	position: relative;
	margin-bottom: 10rpx;
}

.agreement-item::before {
	content: '•';
	position: absolute;
	left: 0;	
	color: #C8A675;
}

.agreement-footer {
	background-color: #FFFFFF;
}

.agreement-checkbox {
	display: flex;
	align-items: center;
	margin-bottom: 24rpx;
}

.checkbox {
	width: 40rpx;
	height: 40rpx;
	border: 2rpx solid #C8A675;
	border-radius: 8rpx;
	margin-right: 16rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.checkbox.checked {
	background-color: #C8A675;
}

.checkbox-icon {
	color: #FFFFFF;
	font-size: 28rpx;
	line-height: 1;
}

.checkbox-text {
	font-size: 28rpx;
	color: #6A4C29;
}

.button-group {
	display: flex;
	justify-content: space-between;
}

.cancel-button, .confirm-button {
	width: 48%;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	font-size: 30rpx;
	border-radius: 40rpx;
	border: none;
}

.cancel-button {
	background-color: #F2EBE0;
	color: #6A4C29;
}

.confirm-button {
	background: linear-gradient(135deg, #C8A675 0%, #6A4C29 100%);
	color: #FFFFFF;
	font-weight: 600;
	box-shadow: 0 4rpx 12rpx rgba(106, 76, 41, 0.2);
}

.confirm-button.disabled {
	opacity: 0.5;
}

/* 守护行者选项弹窗样式 */
.walker-options-modal {
	width: 85%;
}

.walker-options {
	padding: 20rpx 10rpx;
}

.walker-option {
	display: flex;
	align-items: center;
	background-color: #FFF;
	border-radius: 15rpx;
	padding: 24rpx 20rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 12rpx rgba(106, 76, 41, 0.08);
	position: relative;
}

.option-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
}

.clock-icon {
	background: linear-gradient(135deg, #ffa600 0%, #ff8c00 100%);
}

.temple-icon {
	background: linear-gradient(135deg, #C8A675 0%, #b38650 100%);
}

.option-icon .iconfont {
	color: #FFF;
	font-size: 34rpx;
}

.option-info {
	flex: 1;
}

.option-title {
	font-size: 32rpx;
	color: #333;
	font-weight: 600;
	display: block;
	margin-bottom: 6rpx;
}

.option-desc {
	font-size: 24rpx;
	color: #999;
	display: block;
}

.option-arrow {
	color: #C8A675;
	font-size: 28rpx;
}
</style>